import React from 'react';
import { Link, browserHistory } from 'react-router';
// 引入Antd的导航组件
import { Menu, Icon, Layout, Breadcrumb, Badge } from 'antd';
const SubMenu = Menu.SubMenu;
const { Header, Content, Footer, Sider } = Layout;

// 配置导航
export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            theme: 'dark',
            username: '',
            collapsed: false,
            mode: 'inline'
        };
    }
    componentWillMount() {
        window.onresize = () => {
          $("#leftMenu").find(".ant-layout-sider-children").css("height", (document.body.clientHeight-48)+"px");
          $("#leftMenu").find(".ant-layout-sider-children").mCustomScrollbar({theme:"minimal"});
        }
    }
    componentDidMount() {
        if(sessionStorage.getItem("staffAuth") == null){
          browserHistory.push("/backstage");
        }else{
          this.setState({
              username: sessionStorage.getItem("staffUserName")
          });
        }
        this.setState({theme: "light"});
        $("#leftMenu").css("backgroundColor","#f7f7f7");
        $("#leftMenu").css("borderRight","1px solid #e9e9e9");
        $(".ant-layout-sider-trigger").css("backgroundColor","#fff");
        $(".ant-layout-sider-trigger").css("color","#595959");
        $("#mCSB_1_scrollbar_vertical").find(".mCSB_dragger_bar").css("backgroundColor", "rgba(0,0,0,0.2)");
    }
    onCollapse(collapsed){
        this.setState({
          collapsed,
          mode: collapsed ? 'vertical' : 'inline',
        });
        if(collapsed){
          $("#logo").attr("src", "/src/styles/images/frobalogo.png");
          $("#logo").attr("width", "48");
          if($("#mCSB_1").length > 0){
            $("#mCSB_1").css("overflow", "initial");
            $("#mCSB_1_container").css("overflow", "initial");
          }
        }else{
          setTimeout(function() {
            $("#logo").attr("src", "/src/styles/images/frobalogo.png");
            $("#logo").attr("width", "182");
          }, 300);

          if($("#mCSB_1").length > 0){
            $("#mCSB_1").css("overflow", "hidden");
            $("#mCSB_1_container").css("overflow", "hidden");
          }
        }
        setTimeout(function(){
          window.onresize();
        },400);
    }
    logout(){
        sessionStorage.removeItem("staffAuth");
        sessionStorage.removeItem("staffUserName");
        location.reload();
    }
    itemRender(route, params, routes, paths){
        const last = routes.indexOf(route) === routes.length - 1;

        if(last == true){
          return <span>{route.breadcrumbName}</span>
        }else {
          if(route.breadcrumbName != undefined){
            if (paths.join('/') == "backstage/home"){
              return <Link to={"/" + paths.join('/')}>{route.breadcrumbName}</Link>;
            }else {
              return <Link to={"/" + paths[paths.length - 1]}>{route.breadcrumbName}</Link>;
            }
          }else {
            return <Link to={"/" + paths.join('/')}>{route.breadcrumbName}</Link>;
          }
        }
    }
    switchTheme(){
        if(this.state.theme == "dark"){
            this.setState({theme: "light"});
            $("#leftMenu").css("backgroundColor","#f7f7f7");
            $("#leftMenu").css("borderRight","1px solid #e9e9e9");
            $(".ant-layout-sider-trigger").css("backgroundColor","#fff");
            $(".ant-layout-sider-trigger").css("color","#595959");
            $("#mCSB_1_scrollbar_vertical").find(".mCSB_dragger_bar").css("backgroundColor", "rgba(0,0,0,0.2)");
        }else{
            this.setState({theme: "dark"});
            $("#leftMenu").css("borderRight","none");
            $("#leftMenu").css("backgroundColor","#333");
            $(".ant-layout-sider-trigger").css("backgroundColor","#3E3E3E");
            $(".ant-layout-sider-trigger").css("color","white");
            $("#mCSB_1_scrollbar_vertical").find(".mCSB_dragger_bar").css("backgroundColor", "rgba(255,255,255,0.2)");
        }
    }
    bindResize(){
        window.onresize();
    }
    render() {
        var permissiones = null; var photoPic = "/src/styles/images/default.png";
        if(sessionStorage.getItem("loginData") != null){
            var userProfile = JSON.parse(sessionStorage.getItem("loginData")).userProfile
            if(!(userProfile.photoPic == undefined || userProfile.photoPic == "")){
                photoPic = userProfile.photoPic;
            }
        }
        return (
            <Layout>
                <Sider id="leftMenu" collapsible
                    collapsed={this.state.collapsed}
                    onCollapse={this.onCollapse.bind(this)}>
                    <img src='/src/styles/images/frobalogo.png' width="182" id="logo" onClick={this.switchTheme.bind(this)} title="菜单主题"/>
                    <Menu theme={this.state.theme}
                        mode={this.state.mode}
                        style={{borderRight: "none"}}
                    >
                        <SubMenu key="sub1" onTitleClick={this.bindResize.bind(this)} title={<span><Icon type="bars" /><span className="nav-text">意见反馈</span></span>}>
                            <Menu.Item key="1"><Link to="/backstage/feedbackList">意见反馈<Badge count={0} className="badgeCount"/></Link></Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub2" onTitleClick={this.bindResize.bind(this)} title={<span><Icon type="user" /><span className="nav-text">人员管理</span></span>}>
                            <Menu.Item key="2"><Link to="/backstage/staffMember">用户管理</Link></Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub3" onTitleClick={this.bindResize.bind(this)} title={<span><Icon type="laptop" /><span className="nav-text">商品管理</span></span>}>
                            <Menu.Item key="3"><Link to="/backstage/carouselManage">轮播管理</Link></Menu.Item>
                            <Menu.Item key="4"><Link to="/backstage/typeManage">类型管理</Link></Menu.Item>
                            <Menu.Item key="5"><Link to="/backstage/productManage">商品管理</Link></Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub4" onTitleClick={this.bindResize.bind(this)} title={<span><Icon type="setting" /><span className="nav-text">系统设置</span></span>}>
                            <Menu.Item key="6"><Link to="/backstage/personalInfo">个人信息</Link></Menu.Item>
                            <Menu.Item key="7"><Link to="/backstage/changePwd">修改密码</Link></Menu.Item>
                        </SubMenu>
                    </Menu>
                </Sider>

                <div id="rightWrap" style={{left: (this.state.mode != "vertical")?"200px":"64px"}}>
                    <Menu mode="horizontal">
                        <SubMenu title={<span><img src={photoPic} title="Avatar" className="imgTopHeader"/>{ this.state.username }</span>}>
                            <Menu.Item key="setting:1" onClick={this.logout.bind(this)}>退出系统</Menu.Item>
                        </SubMenu>

                        <Breadcrumb routes={this.props.routes} params={this.props.params} separator=">" itemRender={this.itemRender.bind(this)}/>
                    </Menu>

                    <div className="right-box">
                        { this.props.children }
                    </div>
                </div>
            </Layout>
        )
    }
}
